<template>
    <div class="card rdsp-card-view" data-page="troubleRank">
        <div class="card-content rank-content card-content-padding dailyMainten-card-content">
          <div class="rdsp-card-title">
                <div class="left-title">日常保养</div>
                <div class="rdsp-card-title-right">
                  <a href="/tabs_dayCareApply/dayAplan/" data-view=".view-main"><div class="right-con" id="dailyMainten-right-tital"></div></a>
                </div>
            </div>
            <div class="rdsp-card-con ">
                <div class="dailyMainten-charts" id="dailyMainten-pie-chart">
                   
                </div>
                <div class="dailyMainten-cotent">
                    <div class="">
                        <a href="/tabs_dayCareApply/dayAplan/" data-view=".view-main">
                          <div class="dailyMainten-today" >今日保养<span id="today-num">0</span></div>
                          <div class="dailyMainten-month-finish" >本期需保养设施<span id="finish-num">0</span></div>
                          <div class="dailyMainten-month-unfinish">本期已保养设施<span id="unfinish-num">0</span></div>
                        </a>
                        
                    </div>
              </div>
            </div>
      </div>
  </div>
</template>

<style scoped>
    .dailyMainten-card-content{
        height: 148px;
    }
    .dailyMainten-card-content>.rdsp-card-con{
    }
    .dailyMainten-charts{
        height: 110px;
        position: relative;
        width: 50%;
        display:inline-block;
    }
    .dailyMainten-cotent{
        float: right; 
        width: 50%;
        margin-top: 5px;   
    }
    .dailyMainten-today{
        font-size: 21px;
        color: #333333;
    }
    .dailyMainten-month-finish{
        margin-top: 14px;
        font-size: 13px;
        color: #999999;
    }
    .dailyMainten-month-finish>span{
        margin-left: 10px;
    }
    .dailyMainten-month-unfinish{
        margin-top: 4px;
        font-size: 13px;
        color: #999999;
    }
    .dailyMainten-month-unfinish>span{
        margin-left: 10px;
    }
    #today-num{
        margin-left: 10px;
        color: #378bf6;
    }

</style>

<script>
    return {
        beforeCreate() {
          $("#dailyMainten-pie-chart").empty();
        },
        data: function () {
            return {
            }
        },
        methods: {
           getdailyMaintenData:function() {
            var self = this;
            var now = new Date();
            var id_org="";
                if (single_Orgid == "") {
                    id_org=userInfor.organizationIds;
                } else {
                    id_org=single_Orgid;
                }
            var time = now.getFullYear() + "-" +((now.getMonth()+1)<10?"0":"")+(now.getMonth()+1)+"-"+(now.getDate()<10?"0":"")+now.getDate() +" 23:59:59";
              Dao.getMaintenanceStatistics({
                      userName:userInfor.accountName,
                      deviceId:appKeyObj.deviceId,
                      planType:1,
                      orgId:id_org
              }, function (data) {
                if(data){
                   $("#dailyMainten-right-tital").empty().html(data.planName);
                   $("#today-num").empty().html(data.todayCompleteCount);
                   $("#finish-num").empty().html(data.completeCount);
                   var unFinish=data.count*1-data.completeCount*1;
                   $("#unfinish-num").empty().html(unFinish);  
                   self.drawChart(data.completeCount,unFinish,data.count);
                }    
              });
          },
           drawChart:function(finish,unFinish,total){
              var rate=(highRiskOrgCount/allnUM);
              var complete= Math.round(rate*100)+"%";
              var arr=[];
              arr.push({
                name : '完成',
                value:finish
              });
              arr.push({
                name : '未完成',
                value:unFinish
              });
              var carChart = echarts.init(document.getElementById('dailyMainten-pie-chart'));
              var _zr = carChart.getZr();
              _zr.add(new echarts.graphic.Text({
               style: {            
                 x: _zr.getWidth() / 2,
                 y: _zr.getHeight() / 2,
                 color: '#999999', 
                 text: '完成率',
                 textAlign: 'center', 
                 textFont : 'normal 10px '
                 }}  
              ));
              _zr.add(new echarts.graphic.Text({
               style: {            
                 x: _zr.getWidth() / 2,
                 y: _zr.getHeight() / 2-14,
                 color: '#666666', 
                 text: complete,
                 textAlign: 'center', 
                 textFont : 'bold 14px verdana'
                 }}  
              ));
              carChart.setOption({
                
                tooltip : {
                  trigger: 'item',
                  show:false,
                  formatter: "{a} <br/>{b} : {c} ({d}%)",
                  position:['50%', '50%']
                },
                series : [
                {
                  name: '保养完成率',
                  type: 'pie',
                  clickable:false,
                  hoverAnimation:false,
                  radius : [40, 50],
                  center: ['50%', '50%'],
                  data:arr,
                  label: {
                    normal: {
                      show: false,
                      position: 'center'
                    },
                    emphasis: {
                      show: false,
                      textStyle: {
                        fontSize: '14',
                        fontWeight: 'bold'
                      }
                    }
                  },
                  itemStyle: {
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  },
                }
                ],
                color: ['#378bf6','#f4f4f4']
              });
          }
        },
        on: {
            pageInit: function(e, page) {
              //inPage  sort 5 
            },
            pageAfterIn: function(e, page) {
              var self = this;
              self.getdailyMaintenData();
              //获取服务器信息
              //inPage  sort 7 
              //Do:进入页面后
            },
            pageBeforeOut: function(e, page) {
              //outPage  sort 0  
              //Do:离开页面前
            },
            pageBeforeRemove: function(e, page) { 
              //outPage  sort 3  
              //Do：方法销毁、内存释放
            }
      }
    }
</script>
